<template>
  <div class="overview-container">
    <!-- 主要内容main -->
    <el-main v-show="true">
      <el-row :gutter="20">
        <!-- 左侧 -->
        <el-col :span="6" class="echarts_left">
          <el-card style="max-width: 480px;" class="brief-card" >
            <template #header>
              <div class="card-header">
                <span>园区概况</span>
              </div>
            </template>
            <div class="card-body" ref="overviewRef" style="max-width: 480px;">
              <video class="overview-video" controls controlsList="nodownload" :src="cultureList" >
              </video>
            </div>
            <div class="brief-title">园区简介</div>
            <div class="brief-content">
              <el-text
                class="mx-1"
                size="small"
                style="color: #fff; margin: 6px;font-size: 14px;"
              >
                  <p v-html="briefList" style="color: #fff !important;"></p>
              </el-text>
            </div>
          </el-card>

          <el-card style="max-width: 480px" class="staff-card">
            <template #header>
              <div class="card-header">
                <span>荣誉墙</span>
              </div>
            </template>
            <div class="card-body" ref="staffRef">
              <el-carousel motion-blur>
                <el-carousel-item v-for="(honorItem,index) in honorList" :key="index">
                  <el-image
                    :src="honorItem" 
                    :zoom-rate="1.2" 
                    :max-scale="7" 
                    :min-scale="0.2"
                    :preview-src-list="honorList" 
                    :initial-index="index" 
                    fit="cover"
                    :preview-teleported=true 
                  />
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-card>
        </el-col>
        <!-- 主视觉 -->
        <el-col :span="12" class="main_view" />
        <!-- 右侧 -->
        <el-col :span="6" class="echarts_right">
          <el-card style="max-width: 480px" class="product-card">
            <template #header>
              <div class="card-header">
                <span>特色产品</span>
              </div>
            </template>
            <div class="card-body" ref="scaleRef">
              <div class="card-item block">
                <el-image
                  v-for="(productItem, index) in productList" 
                  :key="index" 
                  :src="productItem" 
                  :zoom-rate="1.2" 
                  :max-scale="7" 
                  :min-scale="0.2"
                  :preview-src-list="productList" 
                  :initial-index="0" 
                  fit="cover"
                  :preview-teleported=true 
                  class="responsive-image"  
                />
              </div>
            </div>
          </el-card>
          <el-card style="max-width: 480px" class="team-card">
            <template #header>
              <div class="card-header">
                <span>优秀团队</span>
              </div>
            </template>
            <div class="card-body" ref="waterChartRef">
              <div class="card-item block">
                <el-image
                  v-for="(item, index) in teamList" 
                  :key="index" 
                  :src="item" 
                  :zoom-rate="1.2" 
                  :max-scale="7" 
                  :min-scale="0.1"
                  :preview-src-list="teamList" 
                  :initial-index="0" 
                  fit="cover"
                  :preview-teleported=true 
                  class="responsive-image"
                />
              </div>
            </div>
          </el-card>
          <el-card style="max-width: 480px" class="partner-card">
            <template #header>
              <div class="card-header">
                <span>合作伙伴</span>
              </div>
            </template>
            <div class="card-body" ref="waterChartRef">
              <div class="card-item block">
                <el-image
                  v-for="(item, index) in partnerList" 
                  :key="index" 
                  :src="item" 
                  :zoom-rate="1.2" 
                  :max-scale="7" 
                  :min-scale="0.2"
                  :preview-src-list="partnerList" 
                  :initial-index="0" 
                  fit="cover"
                  :preview-teleported=true
                  class="responsive-image"
                />
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </el-main>
  </div>
</template>

<script setup name="Overview" lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref, watch, watchEffect, reactive, onUnmounted, computed } from 'vue'
import {EnterpriseApi} from '@/api/farm/enterprise'
import { any, integer } from 'vue-types';
import { Interface } from 'readline';
import { error } from 'console';


// 定义图片数组类型
interface AllList {
  id: number;
  name: string; 
  type:string
}
const briefList =ref<string>('')//园区简介
const honorList = ref<AllList[]>([])//荣誉墙
const partnerList = ref<AllList[]>([])//合作伙伴
const teamList = ref<AllList[]>([])//优秀团队
const productList =ref<AllList[]>([])//特色产品
const cultureList = ref('')//园区概况




// 园区简介
// const brief = ()=>{
//   const params = { type: 'quill' };
//   EnterpriseApi.getHonorList(params).then(res=>{
//     if(res){
//       briefList.value = res.urls[0]
//       console.log(briefList.value,'beiefList.value');
//     }else{
//       return
//     }
//   }).catch(error=>{
//     console.log(error,'error');
//   })
// }
const brief = () => {
  const params = { type: 'quill' };
  EnterpriseApi.getHonorList(params).then(res => {
    if (res) {
      // 处理返回的 HTML，移除内联样式或替换颜色
      const parser = new DOMParser();
      const doc = parser.parseFromString(res.urls[0], 'text/html');
      const spans = doc.querySelectorAll('span');

      spans.forEach(span => {
        span.style.color = 'white'; // 或者将其内联样式移除
      });

      briefList.value = doc.body.innerHTML; // 获取处理后的 HTML
      console.log(briefList.value, 'beiefList.value');
    } else {
      return;
    }
  }).catch(error => {
    console.log(error, 'error');
  });
}

//园区概况
const culture=()=>{
  const params = { type: 'video' };
  EnterpriseApi.getHonorList(params).then(res=>{
    if(res){
      cultureList.value = res.urls[0]
      // console.log(cultureList.value,'cultureList.value');
    }else{
      return
    }
  }).catch(error=>{
    console.log(error,'error');
  })
}
// 荣誉墙
const honor=()=>{
  const params = { type: 'honor' };
  EnterpriseApi.getHonorList(params).then(res=>{
    if(res){
      // console.log(res.urls,'partner');
      honorList.value = res.urls
    }else{
      return
    }
  }).catch(error=>{
    console.log(error,'error');
  })
}
// 合作伙伴
const partner = () =>{
  const params = { type: 'partner' };
  EnterpriseApi.getHonorList(params).then(res=>{
    if(res){
      // console.log(res.urls,'partner');
      partnerList.value = res.urls
    }else{
      return
    }
  }).catch(error=>{
    console.log(error,'error');
  })
}
//优秀团队
const team =()=>{
  const params = { type: 'team' };
  EnterpriseApi.getHonorList(params).then(res=>{
    if(res){
      teamList.value = res.urls
    }else{
      return 
    }
  }).catch(error=>{
    console.log(error,'error');
  })
}
// 特色产品
const product =()=>{
  const params = { type: 'product' };
  EnterpriseApi.getHonorList(params).then(res=>{
      if (res) {
        productList.value = res.urls
      }else{
        return
      }
  }).catch(error=>{
    console.log(error,'error');
    
  })
}

const router = useRouter()

/** getCurrentInstance使用注意点
 * getCurrentInstance 只能在 setup 或生命周期钩子中使用
 * getCurrentInstance线上环境报错问题: 使用proxy代替ctx,proxy线上不会出现问题
 * 在vue3中不推荐使用getCurrentInstance获取组件实例
 * 如果是获取dom大家可以通过ref获取
 * 至于其他的一些常用属性和方法，vue3中的setup中提供了props和contexts上下文
 */
const { proxy }:any = getCurrentInstance()


const data = reactive({
  weatherList: {}
})

const { weatherList } = toRefs(data)


// 使用 watchEffect 来响应数据的变化
watchEffect(() => {})

onMounted(()=>{
  partner()
  team()
  product()
  honor()
  culture()
  brief()

})
</script>

<style scope lang="scss">
.overview-container {
  // height: 79%;
  width: 100%;
  overflow-x:hidden ;
  .el-main {
    // width: 100%;
    // height: 100%;
    overflow-x: hidden;
    // background-color: yellow;
    // padding: 15px;
    .el-row {
      height: 100%;
    }
    .el-card {
      border: none;
      color: #fff;
      background: linear-gradient(180deg, #001e54 0%, rgba(4, 51, 132, 0.29) 100%);
      .el-card__header {
        padding: 0 !important;
        min-height: 44px;
        border-bottom-color: #40a0ff6d;
        .card-header {
          font-size: 20px;
          min-height: 44px;
          padding: 0 0 0 16px;
          display: flex;
          align-items: center;
          span{
            color: #409eff;
            font-weight: bold;
            font-size: 20px;
          }
        }
      }
      .el-card__body {
        padding: 0 !important;
        // height: calc(100% - 28px);
        min-height: calc(100% - 28px);
        .card-body {
          height: 100%;
          .overview-video {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .echarts_left {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    .main_view {
      margin-top: 10px;
      .cont-list {
        display: flex;
        background: rgba(36, 54, 111, 0.9);
        box-shadow: 0 4px 10px #0000001d;
        justify-content: space-around;
        align-items: center;
        padding: 10px;
        position: relative;
        .cont-item {
          display: flex;
          .cont-item-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            img {
              width: 44px;
              height: 44px;
              object-fit: contain;
            }
            span {
              font-size: 18px;
              font-weight: 500;
              color: #fff;
              line-height: 25px;
            }
          }
          .cont-item-right {
            padding-left: 20px;
            .day {
              font-size: 22px;
              font-weight: 700;
              color: #fff;
              line-height: 26px;
            }
            .data {
              font-size: 32px;
              font-weight: 700;
              color: #fff;
              line-height: 33px;
              padding-top: 10px;
            }
            .unit {
              font-size: 22px;
              font-weight: 600;
              color: #b6c1c4;
              line-height: 26px;
              padding-left: 10px;
            }
          }
        }
      }
    }
    .echarts_right {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
  }
}
.brief-card {
  height: 62%;
  .brief-title {
    text-align: center;
  }
}
.staff-card {
  height: 34%;
  .el-card__body {
    height: calc(100% - 28px);
  }
  .el-carousel {
    height: 100%;
    .el-carousel__container {
      height: 100%;
    }
    .el-carousel__item {
      text-align: center;
      margin-top: 10px;
    }
    img {
      // padding: 8px;
      width: 98%;
      height: 80%;
    }
  }
}
.product-card,
.team-card,
.partner-card {
  height: 30%;
  .el-card__body {
    height: calc(100% - 40px);
  }
  .card-body {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
  }

  img {
    transition: transform 0.5s ease; /* 平滑过渡效果 */
  }
  img:hover {
    transform: scale(1.2); /* 缩放1.1倍 */
  }
}
.product-card {
  .card-item {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex; 
    flex-wrap: wrap;
    .responsive-image{
      aspect-ratio: 16 / 9; /*图片比例 */
      width: 100vw; /* 图片宽度 */
      height: auto;
    }
  }
  img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}
.partner-card {
  .card-item {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 2px;
    display: flex;
    flex-wrap: wrap;
    .responsive-image{
      aspect-ratio: 16 / 9;
      width: 100%;
      height: auto;
    }
  }
  img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}
.team-card {
  .card-item {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex; 
    flex-wrap: wrap;
    .responsive-image{
      aspect-ratio: 16 / 9; /* 图片比例 */
      width: 100%; 
      height: auto; 
      object-fit: contain; /* 保持图片比例并完整显示 */
    }
  }
  img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}

.brief-content {
  // margin-top: 10px;
  overflow: hidden;
  // white-space: nowrap;
  height: 230px;
  box-sizing: border-box;
  // animation: marquee 10s linear infinite;
}

.el-text {
  line-height: 1.5;
  letter-spacing: 2px;

  display: inline-block;
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
</style>
